/*
 * Live CSS will monitor <link> tags on the page and poll the server for changes to the CSS. This enables you
 * to refresh styles without disrupting the state of the view, and the page updates itself without you
 * having to switch from your editor to the browser and hit refresh.
 *
 * Usage:
 * livecss.watchAll() - starts polling all <link> tags in the current page for changes.
 *
 * If you want more fine grained control over which CSS is being autoreloaded:
 * livecss.watch(linkElement) - start watching a single <link> element for changes.
 * livecss.unwatchAll()
 * livecss.unwatch(linkElement)
 *
 * For convenience, livecss will call watchAll() right away if the page has "startlivecss=true" in the URL's
 * query string.
 */
var livecss = {
    // How often to poll for changes to the CSS.
    pollFrequency: 1000,
    outstandingRequests: {}, // stylesheet url => boolean
    filesLastModified: {}, // stylesheet url => last modified timestamp
    watchTimers: {}, // stylesheet url => timer ID

    /*
     * Begins polling all link elements on the current page for changes.
     */
    watchAll: function () {
        this.unwatchAll();
        var timerId = setInterval(this.proxy(function () {
            var linkElements = document.getElementsByTagName("link");
            var validMediaTypes = ["screen", "handheld", "all", ""];
            for (var i = 0; i < linkElements.length; i++) {
                var media = (linkElements[i].getAttribute("media") || "").toLowerCase();
                if (linkElements[i].getAttribute("rel") == "stylesheet"
                    && livecss.indexOf(validMediaTypes, media) >= 0
                    && this.isLocalLink(linkElements[i])) {
                    this.refreshLinkElement(linkElements[i]);
                }
            }
        }), this.pollFrequency);
        this.watchTimers["all"] = timerId;
    },

    watch: function (linkElement) {
        var url = linkElement.getAttribute("href");
        this.unwatch(url);
        this.watchTimers[url] = setInterval(this.proxy(function () {
            var linkElement = this.linkElementWithHref(url);
            this.refreshLinkElement(linkElement);
        }), this.pollFrequency);
    },

    unwatchAll: function () {
        for (var url in this.watchTimers)
            this.unwatch(url);
    },

    unwatch: function (url) {
        if (this.watchTimers[url] != null) {
            clearInterval(this.watchTimers[url]);
            delete this.watchTimers[url];
            delete this.outstandingRequests[url];
        }
    },

    linkElementWithHref: function (url) {
        var linkElements = document.getElementsByTagName("link");
        for (var i = 0; i < linkElements.length; i++)
            if (linkElements[i].href == url)
                return linkElements[i]
    },

    /*
     * Replaces a link element with a new one for the given URL. This has to wait for the new <link> to fully
     * load, because simply changing the href on an existing <link> causes the page to flicker.
     */
    replaceLinkElement: function (linkElement, stylesheetUrl) {
        var parent = linkElement.parentNode;
        var sibling = linkElement.nextSibling;
        var url = this.addCacheBust(linkElement.href);

        var newLinkElement = document.createElement("link");
        newLinkElement.href = url;
        newLinkElement.setAttribute("rel", "stylesheet");

        if (sibling)
            parent.insertBefore(newLinkElement, sibling);
        else
            parent.appendChild(newLinkElement);

        // We're polling to check whether the CSS is loaded, because firefox doesn't support an onload event
        // for <link> elements.
        var loadingTimer = setInterval(this.proxy(function () {
            if (!this.isCssElementLoaded(newLinkElement)) return;
            if (typeof(console) != "undefined")
                console.log("CSS refreshed:", this.removeCacheBust(url));
            clearInterval(loadingTimer);
            delete this.outstandingRequests[this.removeCacheBust(url)];
            parent.removeChild(linkElement);
        }), 100);
    },

    /*
     * Refreshes the provided linkElement if it's changed. We issue a HEAD request for the CSS. If its
     * last-modified header is changed, we remove and re-add the <link> element to the DOM which trigger a
     * re-render from the browser. This uses a cache-bust querystring parameter to ensure we always bust through
     * the browser's cache.
     */
    refreshLinkElement: function (linkElement) {
        var url = this.removeCacheBust(linkElement.getAttribute("href"));
        if (this.outstandingRequests[url]) return;
        var request = new XMLHttpRequest();
        this.outstandingRequests[url] = request;
        var cacheBustUrl = this.addCacheBust(url);

        request.onreadystatechange = this.proxy(function (event) {
            if (request.readyState != 4) return;
            delete this.outstandingRequests[url];
            if (request.status != 200 && request.status != 304) return;
            var lastModified = Date.parse(request.getResponseHeader("Last-Modified"));
            if (!this.filesLastModified[url] || this.filesLastModified[url] < lastModified) {
                this.filesLastModified[url] = lastModified;
                this.replaceLinkElement(linkElement, cacheBustUrl);
            }
        });
        request.open("HEAD", cacheBustUrl);
        request.send(null);
    },

    isCssElementLoaded: function (cssElement) {
        // cssElement.sheet.cssRules will throw an error in firefox when the css file is not yet loaded.
        try {
            return (cssElement.sheet && cssElement.sheet.cssRules.length > 0);
        } catch (error) {
        }
        return false;
    },

    /* returns true for local urls such as: '/screen.css', 'http://mydomain.com/screen.css', 'css/screen.css'
     */
    isLocalLink: function (linkElement) {
        //On all tested browsers, this javascript property returns a normalized URL
        var url = linkElement.href;
        var regexp = new RegExp("^\/|^" +
            document.location.protocol + "//" + document.location.host);
        return (url.search(regexp) == 0);
    },

    /*
     * Adds and removes a "cache_bust" querystring parameter to the given URLs. This is so we always bust
     * through the browser's cache when checking for updated CSS.
     */
    addCacheBust: function (url) {
        return this.removeCacheBust(url) + "?cache_bust=" + (new Date()).getTime();
    },
    removeCacheBust: function (url) {
        return url.replace(/\?cache_bust=[^&]+/, "");
    },

    /* A utility method to bind the value of "this". Equivalent to jQuery's proxy() function. */
    proxy: function (fn) {
        var self = this;
        return function () {
            return fn.apply(self, []);
        };
    },

    /* Unfortunately IE7 doesn't have this built-in. */
    indexOf: function (array, item) {
        for (var i = 0; i < array.length; i++) {
            if (array[i] == item) return i;
        }
        return -1;
    },

    /* A utility function for abstracting the difference between event listening in IE and other browsers. */
    addEventListener: function (object, event, fn) {
        object.attachEvent ? object.attachEvent("on" + event, fn) : object.addEventListener(event, fn, false);
    }
};

if (window.location.search.toString().indexOf("startlivecss=true") >= 0)
    livecss.addEventListener(window, "load", function () {
        livecss.watchAll();
    });